import React  from "react";
import { useState,useEffect } from "react";

// 函数式组件没有this 函数组件没有生命周期
// 函数式组件使用hook（钩子）
// useState  用在函数组件最顶层
// const App = ()=>{
//     const [msg,setMsg] = useState('你好实际')

//     const fn = ()=>{
//         setMsg('我想换一个东西')
//     }

//     return   <div>
//         <h3>{msg}</h3>
// <button onClick={fn}>更新</button>
//     </div> 
// }

export default function App (){
    const [msg,setMsg] = useState('1')
    const [msg1,setMsg1] = useState('1')
    // 模拟mounted 一般在这个位置写ajax
    // useEffect(()=>{
    //     console.log('挂载完成');
    // })

    //模拟updated 检测数据更新，那个数据要更新就把那个变量写道数组中
    // 检测所有直接写2个或者不写
    // 当不想检测任何数据的更新，可以直接写个空数组[]
    useEffect(()=>{
        console.log('num1更新了');
    },[msg,msg1])

    // 模拟beforeDestory  处理脏数据或者垃圾回收
    useEffect(()=>{
            return ()=>{
                console.log('销毁完成');
            }
    })
    return  (
            <div>
                <h3>数字1为{msg}</h3>
                <button onClick={()=>setMsg(msg+1)}>累加</button>
                <h3>数字2为{msg1}</h3>
                <button onClick={()=>setMsg1(msg1+1)}>累加</button>
            </div> 
    ) 
    }

// 第二个钩子 useEff